<template>

  <div class="app-container">
    <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户名称" prop="contactName">
        <el-input v-model="queryParams.contactName" placeholder="请输入客户名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="录音名称" prop="contactName">
        <el-input v-model="queryParams.contactName" placeholder="请输入录音名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="日期" prop="dateRange">
        <el-date-picker v-model="queryParams.dateRange" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="customerName">
        <el-input v-model="queryParams.customerName" placeholder="请选择状态" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <!-- <el-table-column label="orderId" align="center" prop="orderId" /> -->
      <el-table-column label="创建时间" align="center" prop="createTime" />

     
      <el-table-column label="客户名称" align="center" prop="customerName">
        <template slot-scope="scope">
          <el-tag @click="openTT()">{{ scope.row.customerName }}未知</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="录音名称" align="center" prop="audioName" />
      <el-table-column label="日期" align="center" prop="date" /> -->

      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '0' && scope.row.orderId" type="danger">解析中</el-tag>
          <el-tag v-if="scope.row.status == '1' && scope.row.orderId">解析完成</el-tag>
          <!-- <el-tag v-if="scope.row.status == '解析完成'" type="success">{{ scope.row.status }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleNew(scope.row)"
            v-hasPermi="['system:customer:edit']">分析跟进</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 查看分段列表抽屉 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :close-on-click-modal="false" size="80%">
      <!-- div -->
      <div class="drawerStyle">
        分析跟进
      </div>
      <div class="drawerBtmStyle">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="prodId"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all
          @selection-change="handleSelectionChangeXunjia" @select="select" @row-click="handleRowChick">
          <el-table-column prop="prodId" label="发言人" width="120">
          </el-table-column>
          <el-table-column prop="text" label="文字">
          </el-table-column>
          <el-table-column prop="longTime" label="音频时长" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startTime" label="片段开始时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endTime" label="片段开始时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <p class="spanStyle backStyle" style="margin-top:24px">有效沟通</p>
      </div>

      <div style="padding:0 24px;font-weight:bold;margin-bottom:12px;">
        分析内容
      </div>
      <div style="padding:0 24px;">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <p><span class="oldSpan backStyle">新客户</span></p>
          <div style="display: flex;align-items: center;justify-content: flex-end;">
            <p v-for="item in textAry" :key="item.value" style="margin:0 !important;">
              <span class="spanStyleSizeSuccess backStyleSize" v-if="item.text == '讲公司' || item.text == '讲产品'">
                {{ item.text }} <i class="istyle">{{ item.dui }}</i>
              </span>
              <span class="spanStyleSize backStyleSize" v-else>
                {{ item.text }} <i class="istyleT">{{ item.cuo }}</i>
              </span>
            </p>
          </div>
          <!-- <p style="color:#1890ff;">讲公司, 讲产品</p> -->
          <!-- 介绍公司，介绍产品，介绍案例，询问联系方式，邀请访厂，送样品，询问需求，添加量，添加成本，将客户案例，催促下单 -->
        </div>
        <div class="descript">
          <div class="contentP">
            <p>交流摘要：</p>
            客户作为中间商，与加易加销售深入探讨在欧洲市场注册新品牌的合作模式。销售强调公司作为中国首家有机酸生产商的优势，已启动法国等地的产品注册，并说明可通过原料供应或贴牌生产两种方式合作。客户重点关注产品溯源、品牌命名权及注册进度，双方就服务区域覆盖和合作细节进行初步对接。
          </div>
        </div>

        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div class="adBgcol">
            <p><span>流失风险</span><span style="font-size:26px;">低风险</span></p>
            <p><span>流失风险说明</span><span>客户积极探讨欧洲品牌注册及合作细节，表现出明确合作意向</span></p>
          </div>
          <div class="adBgcol">
            <p><span>成交意愿</span><span style="font-size:26px;">高</span></p>
            <p><span>成交意愿说明</span><span>深入询问产品注册流程、生产能力和区域服务覆盖范围</span></p>
          </div>
        </div>

        <div>
          <p><span class="styleCol">所在行业：</span><span class="huag">精细化工</span></p>
        </div>
        <div>
          <p><span class="styleCol">核心诉求：</span><span class="huag">通过加易加的产品支持在欧洲注册自有品牌并实现定制化生产</span></p>
        </div>
        <div>
          <p><span class="styleCol">业务痛点：</span><span class="huag">缺乏具备欧洲合规注册能力且支持自有品牌贴牌的原料供应商</span></p>
        </div>
        <div>
          <p><span class="styleCol">成交阻碍因素：</span><span class="huag">"欧洲地区注册法规复杂性", "品牌合作中的知识产权归属", "区域供应链响应速度"</span>
          </p>
        </div>
        <div>
          <p class="huagongSize"><span style="margin-right:8px;">#化工原料</span><span>#决策链复杂</span></p>
        </div>
      </div>
    </el-drawer>

    <!-- 用户点击客户名称 -->
    <el-drawer :visible.sync="openT" :with-header="false" :close-on-click-modal="false" size="80%">
      <!-- div -->
      <!-- <div class="drawerStyle">
        客户详情
      </div> -->
      <div class="drawerBtmStyle">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="prodId"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all
          @selection-change="handleSelectionChangeXunjia" @select="select" @row-click="handleRowChick">
          <el-table-column prop="prodId" label="发言人" width="120">
          </el-table-column>
          <el-table-column prop="text" label="文字">
          </el-table-column>
          <el-table-column prop="longTime" label="音频时长" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startTime" label="片段开始时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endTime" label="片段开始时间" show-overflow-tooltip>
          </el-table-column>

        </el-table>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { listCustomerInfo,listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/system/audio";
import { getToken } from "@/utils/auth";

export default {
  name: "Customer",
  data() {
    return {
      textAry: [
        {
          value: 1,
          text: '讲公司',
          dui: '✓',
          cuo: 'X'

        },
        {
          value: 2,
          text: '讲产品',
          dui: '✓',
          cuo: 'X'
        },
        {
          value: 3,
          text: '讲案例',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 4,
          text: '询问联系方式',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 5,
          text: '邀请访厂',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 6,
          text: '送样品',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 7,
          text: '询问需求',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 8,
          text: '添加量',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 9,
          text: '添加成本',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 10,
          text: '讲客户案例',
          dui: '✓',
          cuo: 'X'
        }, {
          value: 11,
          text: '催促下单',
          dui: '✓',
          cuo: 'X'
        },
      ],
      openT: false,
      customer: '',
      optionList: [{
        value: '001',
        label: '文字001'
      }, {
        value: '002',
        label: '文字002'
      }, {
        value: '003',
        label: '文字003'
      }],
      openSelect: false,
      headers: {
        'Authorization': 'Bearer ' + getToken(),
      },
      pusReturn: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload",
      multipleSelection: [],
      // 抽屉里面的音频列表
      tableData: [{
        prodId: '001',
        text: 'sdfsdfsdfsdfsdfsdf',
        audio: 'url',
        customerName: '客户001',
        customerId: '01',
        longTime: '00:06\'',
        startTime: '00:06\'',
        endTime: '24:06\''
      }, {
        prodId: '002',
        text: 'sdfsdfsdfsdfsdfsdf',
        audio: 'url',
        customerName: '客户001',
        customerId: '01',
        longTime: '00:06\'',
        startTime: '00:06\'',
        endTime: '24:06\''
      }, {
        prodId: '003',
        text: 'sdfsdfsdfsdfsdfsdf',
        audio: 'url',
        customerName: '客户001',
        customerId: '01',
        longTime: '00:06\'',
        startTime: '00:06\'',
        endTime: '24:06\''
      }, {
        prodId: '005',
        text: 'sdfsdfsdfsdfsdfsdf',
        audio: 'url',
        customerName: '客户001',
        customerId: '01',
        longTime: '00:06\'',
        startTime: '00:06\'',
        endTime: '24:06\''
      }],

      // 抽屉
      drawer: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户信息表格数据
      customerList: [],
      // 弹出层标题
      title: "",
      titleT: '请选择客户',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        contactName: null,
        phone: null,
        dateRange: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        createBy: [
          { required: true, message: "创建者不能为空", trigger: "blur" }
        ],
        updateBy: [
          { required: true, message: "更新者不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    openTT() {
      this.openT = true
    },
    // 删除
    handleDeleteAudio(row) {
      console.log('删除')
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除该分段？').then(function () {
        return delCustomer(ids);
      }).then(() => {
        // this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    // 点击确定
    AxcureBtn() {
      console.log('点击了确定')
      // this.openSelect = false
    },
    // 取消
    cancelBtn() {
      this.openSelect = false
    },
    //  选择客户
    handleSelect(row) {
      this.openSelect = true
    },
    // 上传文件相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    beforeUpload(file) {
      console.log(file)
    },

    onSuccess(file) {
      console.log('file', file)
    },
    // 上传音频限制
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制只能上传一个文件`);
    },
    // 选择音频
    handleSelectionChangeXunjia(val) {
      this.multipleSelection = val;
    },
    // 点击某一行 勾选或者取消复选框
    handleRowChick(row) {
      const selected = this.multipleSelection.some((item) => item.inquiryId === row.inquiryId)
      if (!selected) {
        // 没有被选中
        this.multipleSelection.push(row)
        this.$refs.multipleTable.toggleRowSelection(row)
      } else {
        // 已勾选了,去除掉勾选
        const finArr = this.multipleSelection.filter((item) => {
          return item.inquiryId !== row.inquiryId
        })
        this.multipleSelection = finArr
        this.$refs.multipleTable.toggleRowSelection(row, false)
      }
    },
    // 点击确定
    toggleSelectionAxcure() {
      // this.pusReturn = []
      console.log('multipleSelection', this.multipleSelection)
      // this.multipleSelection.forEach(item => {
      //   this.pusReturn.push(item);
      // })
      // this.pusReturn.forEach(item2 => {
      //   let obj = {
      //     kingFmaterialId: '0041',
      //     unitPriceTax: '￥566',
      //     taxRate: '账期',
      //     kingFprice: '562',
      //     prodName: '产品名称',
      //     realProdId: '256',
      //     kingFunitId: '6542893',
      //     unit: '563kg',
      //     selectIdPro: 'selectIdPro',
      //     kingFdeliveryDate: '2025-12-26'
      //   }
      //   this.purPurchaseOrderDetailList.push(obj)
      // })
      // this.drawer = false
      // this.getProList()
    },

    // 点击取消
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
      // this.drawer = false
      // this.pusReturn = []
      console.log('multipleSelection', this.multipleSelection)
    },

    // 判断某一天是否勾选
    select(selection, row) {
      console.log('selection', 'row')
    },

    // 查看详情
    handleNew(row) {
      let params = {
        mainId:row.id
      }
      listCustomerInfo(params).then(res=>{
        console.log('分段',res.data)
      })
      this.drawer = true
    },

    /** 查询客户信息列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        customerName: null,
        contactName: null,
        phone: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增客户";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCustomer(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户信息";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            })
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除客户信息编号为"' + ids + '"的数据项？').then(function () {
        return delCustomer(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }

  }
};
</script>

<style>
.drawerStyle {
  padding: 24px;
  font-weight: bold;
}

.drawerBtmStyle {
  padding: 24px;
}

.btnEle {
  margin-top: 24px;
}

.divStyle {
  padding: 24px 0;
}

.divStyle .el-button {
  padding: 14px 46px;
  font-size: 18px;
}

.backStyle {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
}

.oldSpan {
  background: #e8f4ff;
  border: 1px solid #d1e9ff;
  color: #1890ff;
  margin-right: 12px;
}

.highSpan {
  background: #e7faf0;
  border: 1px solid #d0f5e0;
  color: #13ce66;
}

.descript {
  border: 1px solid #e6ebf5;
  border-radius: 8px;
  padding: 12px;
}

.descript p {
  margin: 0 !important;
}

.contentP {
  color: #333;
  line-height: 32px;
}

.spanStyle {
  background: #ffdbda;
  color: #ff000c;
  border: 1px solid #f5d0d8;
  display: inline-block;
}

.styleCol {
  color: #333;
  display: inline-block;
}

.huag {
  color: #606266;
  margin-left: 24px;
}

.adBgcol {
  background: #eff6fe;
  display: flex;
  align-items: flex-start;
  padding: 12px;
  margin-top: 12px;
  border-radius: 8px;
  flex: 1;
  margin-right: 12px;
}

.adBgcol P {
  padding: 12px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0;
  margin: 0;
  color: #606266;
}

.adBgcol P:nth-child(1) {
  margin-right: 32px;
}

.adBgcol P span:nth-child(1) {
  margin-bottom: 12px;
}

.huagongSize {
  color: #1890ff;
  font-size: 14px;
}

.adBgcol P:nth-child(2) {
  font-size: 14px;
}

.spanStyleSize {
  background: #ffdbdac5;
  color: #ff000c;
  border: 1px solid #f5d0d8;
}

.backStyleSize {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 6px;
  display: flex;
  align-items: center;
}

.spanStyleSizeSuccess {
  background: #d6f7e9;
  color: #186d47;
  border: 1px solid #e2f5d0;
}

.backStyleSize i {
  border-radius: 100%;
  display: inline-block;
  width: 14px;
  height: 14px;
  font-size: 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding-top:2px;
  font-style: normal;
}

.istyle {
  border: 1px solid #186d47;
}

.istyleT {
  border: 1px solid red;
}
</style>
